<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>报警记录 - 智能水产养殖系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-danger">
                <i class="bi bi-exclamation-triangle"></i> 报警记录
            </h2>
            <p class="text-muted">查看历史报警信息和异常数据记录</p>
        </div>
    </div>

    <!-- 消息提示 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-danger text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-list-ul"></i> 报警历史记录
                    </h5>
                    <div>
                        <button type="button" class="btn btn-light btn-sm" onclick="clearAlarms()">
                            <i class="bi bi-trash"></i> 清除记录
                        </button>
                        <button type="button" class="btn btn-outline-light btn-sm ms-2" onclick="refreshPage()">
                            <i class="bi bi-arrow-clockwise"></i> 刷新
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    {% if alarms %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>时间</th>
                                        <th>报警类型</th>
                                        <th>异常值</th>
                                        <th>正常范围</th>
                                        <th>严重程度</th>
                                        <th>报警信息</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for alarm in alarms %}
                                    <tr class="{% if alarm.severity == 'high' %}table-danger{% elif alarm.severity == 'medium' %}table-warning{% else %}table-info{% endif %}">
                                        <td>{{ alarm.timestamp }}</td>
                                        <td>
                                            {% if alarm.type == 'temperature' %}
                                                <i class="bi bi-thermometer-half text-primary"></i> 水温
                                            {% elif alarm.type == 'ph' %}
                                                <i class="bi bi-droplet text-success"></i> pH值
                                            {% elif alarm.type == 'dissolved_oxygen' %}
                                                <i class="bi bi-cloud-rain text-info"></i> 溶解氧
                                            {% else %}
                                                <i class="bi bi-gear text-secondary"></i> {{ alarm.type }}
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-danger">{{ alarm.value }}</span>
                                        </td>
                                        <td>
                                            {{ alarm.threshold.min }} - {{ alarm.threshold.max }}
                                        </td>
                                        <td>
                                            {% if alarm.severity == 'high' %}
                                                <span class="badge bg-danger">高</span>
                                            {% elif alarm.severity == 'medium' %}
                                                <span class="badge bg-warning">中</span>
                                            {% else %}
                                                <span class="badge bg-info">低</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ alarm.message }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-check-circle text-success" style="font-size: 3rem;"></i>
                            <h4 class="text-success mt-3">暂无报警记录</h4>
                            <p class="text-muted">系统运行正常，没有检测到异常数据</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 报警统计 -->
    {% if alarms %}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow text-center">
                <div class="card-body">
                    <i class="bi bi-exclamation-triangle text-danger" style="font-size: 2rem;"></i>
                    <h4 class="text-danger">{{ alarms|length }}</h4>
                    <p class="text-muted">总报警数</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow text-center">
                <div class="card-body">
                    <i class="bi bi-thermometer-half text-primary" style="font-size: 2rem;"></i>
                    <h4 class="text-primary">{{ alarms|selectattr('type', 'equalto', 'temperature')|list|length }}</h4>
                    <p class="text-muted">水温报警</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow text-center">
                <div class="card-body">
                    <i class="bi bi-droplet text-success" style="font-size: 2rem;"></i>
                    <h4 class="text-success">{{ alarms|selectattr('type', 'equalto', 'ph')|list|length }}</h4>
                    <p class="text-muted">pH值报警</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow text-center">
                <div class="card-body">
                    <i class="bi bi-cloud-rain text-info" style="font-size: 2rem;"></i>
                    <h4 class="text-info">{{ alarms|selectattr('type', 'equalto', 'dissolved_oxygen')|list|length }}</h4>
                    <p class="text-muted">溶解氧报警</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{{ url_for('alarm_settings') }}" class="btn btn-outline-primary">
                <i class="bi bi-gear"></i> 报警设置
            </a>
            <a href="{{ url_for('user_home') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 清除报警记录
function clearAlarms() {
    if (confirm('确定要清除所有报警记录吗？此操作不可恢复！')) {
        // 显示加载状态
        const button = event.target;
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="bi bi-hourglass-split"></i> 清除中...';
        button.disabled = true;
        
        // 发送清除请求
        fetch('{{ url_for("clear_alarms") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        })
        .then(response => {
            if (response.ok) {
                // 清除成功，刷新页面
                alert('报警记录已成功清除');
                window.location.reload();
            } else {
                throw new Error('清除失败');
            }
        })
        .catch(error => {
            console.error('清除报警记录失败:', error);
            alert('清除报警记录失败，请重试');
            // 恢复按钮状态
            button.innerHTML = originalText;
            button.disabled = false;
        });
    }
}

// 刷新页面
function refreshPage() {
    window.location.reload();
}

// 显示消息
function showMessage(message, type) {
    // 移除旧的消息
    const existingAlerts = document.querySelectorAll('.alert');
    existingAlerts.forEach(alert => alert.remove());
    
    // 创建新消息
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // 插入到页面顶部
    const container = document.querySelector('.container');
    container.insertBefore(alertDiv, container.firstChild);
    
    // 3秒后自动消失
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 3000);
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('报警记录页面加载完成');
    
    // 添加键盘快捷键
    document.addEventListener('keydown', function(e) {
        // Ctrl+R 刷新页面
        if (e.ctrlKey && e.key === 'r') {
            e.preventDefault();
            refreshPage();
        }
        // Delete 键清除记录
        if (e.key === 'Delete') {
            e.preventDefault();
            clearAlarms();
        }
    });
});
</script>

</body>
</html> 